<template>
  <div class="container">
    <div class="header-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="账号">
          <el-input v-model="formInline.username" placeholder="账号" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="formInline.name" placeholder="姓名" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      class="table-container"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="userId"
        label="ID"
        width="150"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      />
      <el-table-column
        prop="username"
        label="账号"
        width="120"
      />
      <el-table-column
        prop="email"
        label="邮箱"
        width="180"
      />
      <!-- <el-table-column label="机型">
          <template slot-scope="scope">
            <img :src="scope.row.thumbnail" width="40%" height="auto">
          </template>
        </el-table-column> -->

      <el-table-column
        prop="phone"
        label="电话"
        width="200"
      />

      <el-table-column prop="type" label="用户类型" width="120">
        <template slot-scope="scope">
          <el-tag :type="getStatusTagType(scope.row.type)">
            {{ scope.row.type }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="注册时间"
        width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.createTime | formatDate }}
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="250"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="openViewDialog(scope.row)">查看</el-button>
          <el-button type="info" size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteSm(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      class="foot-container"
      layout="prev, pager, next, total, jumper"
      :page-size="pagesize"
      :total="itemToltal"
      @current-change="current_change"
    />

    <!-- 查看框 -->
    <el-dialog title="用户详情" :visible.sync="isViewDialogVisible" class="details-dialog" center>
      <div>
        <p>账号: {{ viewedData.username }}</p>
        <p>姓名: {{ viewedData.name }}</p>
        <p>邮箱: {{ viewedData.email }}</p>
        <p>电话: {{ viewedData.phone }}</p>
        <p>用户类型: {{ viewedData.type }}</p>
        <p>注册时间: {{ viewedData.createTime | formatDate }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isViewDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 修改弹出框 -->
    <el-dialog title="编辑" :visible.sync="isEditDialogVisible" center>
      <el-form :model="editedData" label-width="80px">
        <!-- 在这里添加你的表单字段 -->
        <el-form-item label="用户ID">
          <el-input v-model="editedData.userId" :disabled="true" />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="editedData.username" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editedData.name" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editedData.email" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="editedData.phone" />
        </el-form-item>
        <el-form-item label="用户类型">
          <el-select v-model="editedData.type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEditedData">保存</el-button>
      </span>
    </el-dialog>

  </div>

</template>

<script>

export default {
  name: 'User',

  filters: {
    formatDate(value) {
      if (Array.isArray(value) && value.length === 6) {
        const [year, month, day, hour, minute, second] = value
        const date = new Date(year, month - 1, day, hour, minute, second)
        return date.toLocaleString()
      }
      return value // Return original value if not a valid array
    }
  },
  data() {
    return {
      /** 搜索框数据 */
      formInline: {
        username: '',
        name: ''
      },

      /** 列表数据、行数... */
      tableData: [],
      itemToltal: 0,
      pagesize: 10,
      currentPage: 1,

      /** 编辑框 */
      isEditDialogVisible: false,
      editedData: {
        userId: null,
        username: '',
        name: '',
        email: '',
        phone: '',
        type: '',
        createTime: ''
      }, // 存储正在编辑的数据

      options: [{
        value: '教师',
        label: '教师'
      }, {
        value: '学生',
        label: '学生'
      }],

      /** 查看框数据 */
      isViewDialogVisible: false,
      viewedData: {
        userId: null,
        username: '',
        name: '',
        email: '',
        phone: '',
        type: '',
        createTime: ''
      }, // 存储当前查看的设备数据

      /** 添加数据 */
      isAddDialogVisible: false,
      newData: {
        userId: null,
        username: '',
        name: '',
        email: '',
        phone: '',
        type: '',
        createTime: ''
      // 其他表单字段
      },
      newDataRules: {
        userId: [
          { required: true, message: '用户Id', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '账号', trigger: 'change' }
        ],
        name: [
          { required: true, message: '姓名', trigger: 'change' }

        ],
        email: [
          { required: true, message: '邮箱', trigger: 'change' }

        ],
        phone: [
          { required: true, message: '电话', trigger: 'change' }

        ],
        type: [
          { required: true, message: '用户类型', trigger: 'change' }

        ],
        createTime: [
          { required: true, message: '创建时间', trigger: 'change' }

        ]
      }

    }
  },
  mounted() {
    this.getData()
  },
  methods: {

    getStatusText(status) {
      return status === 1 ? '正常' : status === 2 ? '维修' : '其他'
    },

    getStatusTagType(type) {
      return type === '学生' ? 'success' : type === '教师' ? 'warning' : 'info'
    },

    /** 查看数据 */
    openViewDialog(row) {
      this.isViewDialogVisible = true
      this.viewedData = { ...row }
    },

    /** 修改数据 */
    openEditDialog(row) {
      this.editedData.userId = row.userId
      this.isEditDialogVisible = true
      this.editedData = { ...row }
    },
    async saveEditedData(row) {
      try {
        const res = await this.$API.userManage.updateUser(this.editedData.userId, this.editedData)
        if (res.success) {
          this.$message.success(res.message)
          this.getData()
        } else {
          this.$message.error(res.message)
        }
      } catch (err) {
        console.log('编辑失败', err)
      }
      this.isEditDialogVisible = false
    },

    /** 添加数据 */
    openAddDialog() {
      this.isAddDialogVisible = true
    },
    async addData() {
      try {
        const res = await this.$API.userManage.addUser(this.newData)
        if (res.success) {
          this.$message.success(res.message)
          this.getData()
        } else {
          this.$message.error(res.message)
        }
      } catch (err) {
        console.log('添加失败', err)
      }

      this.isAddDialogVisible = false
      // 清空新增数据对象
      this.newData = {
        laboratoryId: '',
        name: '',
        number: '',
        purpose: '',
        softwareSystem: '',
        status: '',
        supplier: '',
        type: '',
        updateTime: '',
        versionNumber: ''
      }
    },

    /** 删除数据 */
    async deleteSm(row) {
      try {
        const confirmResult = await this.$confirm('是否删除该用户？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        if (confirmResult) {
          const id = row.userId
          const res = await this.$API.userManage.removeUser(id)

          if (res.success) {
            this.$message.success(res.message)
            this.getData() // 刷新数据
          } else {
            this.$message.error(res.message)
          }
        }
      } catch (error) {
        console.error('删除设备信息出错：', error)
      }
    },

    /** 获取数据 */
    async getData() {
      try {
        const res = await this.$API.userManage.getUserPage({
          pageNum: this.currentPage,
          pageSize: this.pagesize,
          username: this.formInline.username,
          name: this.formInline.name
        })
        this.tableData = res.data.data.records
        this.itemToltal = res.data.data.total
      } catch (err) {
        console.log(err)
      }
    },
    current_change(currentPage) {
      this.currentPage = currentPage
      this.getData()
    }
  }

}
</script>

<style lang="scss" scoped>

element.style {
    padding-right:0px;
}
.container{
  background-color: white;
  border-radius: 20px;
  padding: 20px;
  .demo-form-inline{
    text-align: center;
  }
  .foot-container{
    text-align: center;
    margin-top: 10px  ;
  }

  .details-dialog{
    padding-right: -15px;
    margin-right: -15px;
    font-weight: 400;
    // background-color: pink;
  }

}
</style>
